<template>
  <div>
    <div id="main"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "BarHistogram",
  // 接受父组件传来的参数
  props: {
    title: "",
    tableChoice: "",
    unit: "",
    universal: "",
  },
  // vue可响应的数据，这个其实就是构建页面的参数，参数变化，页面也会有变化。
  data() {
    return {
      echartsList: [],
      isDownLoad: 0,
      list: [],
      decrementList: [],
      labelName: "",
      labelName1: "",
      dataColumn: [],
      dataColumn1: [],
      openColumn: [],
      openColumn1: [],
      worldMapContainer: {},
      dataArr: [],
      remarks: 1,
    };
  },
  //vue的生命周期，挂载元素，渲染页面
  mounted() {
    this.worldMapContainer = document.getElementById("main");
    //设置容器高宽
    this.isDownLoad = this.$route.query.download;
    this.resizeWorldMapContainer();
    this.remarks = this.$route.query.remarks;
    console.log("universal", this.universal);
  },
  created() {},
  //方法vue里面的函数全都写在这里面
  methods: {
    //用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽
    resizeWorldMapContainer() {
      if (this.isDownLoad == 1) {
        this.worldMapContainer.style.width = "3840px";
        this.worldMapContainer.style.height = "2164px";
      } else {
        this.worldMapContainer.style.width = window.innerWidth - 270 + "px";
        this.worldMapContainer.style.height = window.innerHeight - 40 + "px";
      }
    },

    downloadFile(url, fileName) {
      var link = document.createElement("a");
      //设置下载的文件名
      document.body.appendChild(link);
      link.style.display = "none";
      link.href = url;
      link.download = fileName;
      link.click();
      document.body.removeChild(link);
      window.URL.revokeObjectURL();
    },

    async drawLine(echartsList) {
      let arr11 = this.universal.split(",");
      let arr2 = echartsList.map((item, index) => {
        return { ...item, type: arr11[index] };
      });
      console.log("arr2", arr2);
      this.dataArr = arr2;

      let data = this.dataArr[0].dataList;
      this.xlist = data.map((item) => item.create_time);
      // let ylist = [];
      // console.log("this.dataArr[0]", dataArr[0]);
      // ylist = this.dataArr[0].List.map((item, index) => item.column_name);
      // const arr = this.tableChoice.split(",");
      // let arrr = arr.map((item) => item.split("|"));
      // this.nameArr = arrr;
      // // console.log("nameArr", this.nameArr);
      // this.echartsList = echartsList;
      // this.list = this.echartsList[0].dataList;

      if (echartsList != null && echartsList.length > 0) {
        // let e = this.echartsList[0].dataList;
        // this.dataColumn = this.echartsList[0].dataColumn;
        // this.openColumn = this.echartsList[0].openColumn;
        // this.labelName = e[0][this.openColumn];
        let myChart = echarts.init(this.worldMapContainer);

        let option = {
          tooltip: {
            show: true,
            trigger: "axis",
            // trigger: "item",
            textStyle: {
              fontSize: 18,
            },
            axisPointer: {
              type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
            },
          },
          title: {
            text: this.title,
            x: "center",
            y: "top",
            textAlign: "left",
            textStyle: {
              fontSize: "22",
            },
          },
          animation: false,
          toolbox: {
            show: true,
            feature: {
              mark: { show: true },
              saveAsImage: { show: true },
            },
          },

          legend: {
            x: "right", //可设定图例在左、右、居中
            padding: [10, 90, 0, 0],
            top: 20,
            right: -40,
            textStyle: {
              fontSize: "16",
              fontWeight: "",
            },
          },
          xAxis: {
            data: this.xlist,
            axisLabel: {
              // interval: 30,
            },
          },
          grid: {
            show: true,
            left: "10px",
            right: "10px",
            bottom: "10px",
            containLabel: true,
            borderWidth: 1,
            borderColor: "#D1D1D1",
            backgroundColor: "rgba(128, 128, 128, 0)",
            containLabel: true,
          },
          yAxis: [
            {
              name: "",
              scale: true,
              type: "value",
              position: "left",
              splitLine: {
                show: true, //不显示横向网格线
              },
              nameTextStyle: {
                fontSize: "16",
              },
            },
            {
              axisLabel: {},
              type: "value",
            },
          ],

          series: (() => {
            let serie = [];
            console.log("this.dataArr", this.dataArr);
            this.dataArr.map((item, index) => {
              if (item.dataList.length > 0) {
                console.log("item111", item);
                let value = item.dataColumn;
                let label = item.openColumn;
                let legend = item.dataList[0][label];
                console.log("item", item);
                let data = {
                  name: item.dataList[index][label],
                  label: label,
                  type: item.type == 0 ? "line" : "bar",
                  yAxisIndex: item.type,
                  // symbolSize: 10, //折线点的大小，必须加这个，折点上方的数值才会显示
                  data: item.dataList.map((item) => {
                    return item[value];
                  }),
                };
                console.log("data", data);
                serie.push(data);
              }
            });
            console.log("serie", serie);
            return serie;
          })(),
        };
        option.yAxis[0].name = "单位：" + this.unit;
        console.log("option.yAxis.name", option.yAxis.name);
        if (this.isDownLoad == 1) {
          option.yAxis[0].nameTextStyle = {
            fontSize: 60, //  字体大小
            lineHeight: 100,
            padding: [-120, 15, 4, 0], //  内填充
          };
          option.xAxis.axisLabel = { fontSize: "72", lineHeight: 150 };
          option.yAxis[0].axisLabel = { fontSize: "72" };
          option.yAxis[1].axisLabel = { fontSize: "72" };
          option.legend.textStyle.fontSize = 60;
          option.legend.textStyle.fontWeight = 60;
          option.legend.itemHeight = 20;
          option.legend.itemWidth = 40;
          option.legend.icon = "rect";
          option.legend.top = 40;
          option.grid.top = 170;
          option.grid.right = 150;
          option.legend.padding = [20, 240, 0, 0];
          option.title.textStyle.fontSize = 90;
          option.title.textStyle.lineHeight = 90;
          option.tooltip.textStyle.fontSize = 90;
          option.series.map((item, index) => {
            item.lineStyle = { width: 20, type: "solid" };
          });
        }
        myChart.setOption(option);

        if (this.isDownLoad == 1) {
          const chartImgUrl = myChart.getDataURL({
            pixelRatio: 1,
            backgroundColor: "",
            type: "png",
          });
          setTimeout(() => {
            this.downloadFile(chartImgUrl, this.title);
          }, 1000);
        }
      }
    },
  },
};
</script>

<style scoped>
#main {
  width: 100%;
  height: 900px;
}
</style>
